<!-- 我的对话框 -->
<template>
   <div class='myDialog'>
        <el-dialog width='30%' :title="formState=='0'?'添加':'修改'" :visible.sync="dialogVisible" 
        :before-close="handleClose" :destroy-on-close='true'>      
            <el-form ref="myForm" :model="myForm" label-width="60px">
                <!-- 动态组织表单内容 -->
                <el-form-item v-for="item,index in dialogItemFilter" 
                :key='index' :label="item.label" :prop="item.prop" 
                :rules="item.rule">
                    <!-- 【1】如果是普通文本 -->
                    <el-input v-if="item.type=='text'" type='text' 
                    v-model="myForm[item.prop]"></el-input>
                    <!-- 【2】如果是密码 -->
                    <el-input v-else-if="item.type=='password'" type='password' 
                    v-model="myForm[item.prop]"></el-input>
                    <!-- 【3】如果是数字 -->
                    <el-input v-else-if="item.type=='number'" type='number' 
                    v-model="myForm[item.prop]"></el-input>
                    <!-- 【4】如果是上传文件 -->
                    <el-upload v-else-if="item.type=='file'" 
                     action="" :http-request='uploadManual(item.prop)'>
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>   
                    <!-- 【5】如果是下拉框-->
                    <el-select v-else-if="item.type=='select'" v-model="myForm[item.prop]" placeholder="请选择">
                        <el-option  label="男" value='male'></el-option>
                        <el-option  label="女" value='female'></el-option>
                    </el-select>
                     <!-- 【6】如果是日期 -->
                    <el-date-picker
                        v-else-if="item.type=='time'"
                        v-model="myForm[item.type]"
                        type="date"
                        value-format="timestamp"
                        placeholder="选择日期">                 
                    </el-date-picker>
                </el-form-item>
            </el-form>

            <template slot="footer" >
                <el-button @click="closeDialog()">取 消</el-button>
                <el-button type="primary" @click="myDate">确 定</el-button>
            </template>
        </el-dialog>
   </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import dataClone from '../libs/common.js'

export default {
  //import引入的组件需要注入到对象中才能使用
  props:['dialogItem'],
  components: {},
  data() {
    //这里存放数据
    return {
        //默认显示对话框.sync的方式
        dialogVisible:false,
        //存储数据
        myForm:{},
        //通知栏状态:0是添加，1是修改
        formState:'0'
    };
  },
  //监听属性 类似于data概念
  computed: {
    dialogItemFilter(){
      return this.dialogItem.filter(item=>item.IsShow!=false)
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      //当点击对话框别的地方时进行的提示处理
      handleClose(done){
        this.$confirm('确认关闭？').then(()=>{done();}).catch(()=>{})
      },
      //记录点击确定时候的数据
      myDate()
      {
        //看表单校验是否通过
        this.$refs.myForm.validate((item)=>{
            if(item){
              // this.$emit('upLoadDate',dataClone(this.myForm));
              // console.log('这里是上传的数据',dataClone(this.myForm));
              //扔出去的时候为了保证img等不可克隆的文件出错，所以不克隆，但是在接收数据并打开对话框的时候为了保证数据不联动，要克隆
              this.$emit('upLoadDate',this.myForm);
              console.log('这里是上传的数据',this.myForm);
              this.closeDialog();
            }
            else
            {
              confirm('请完善表单数据')
            }
        });       
      },
      //控制对话框打开
      openDialog(item){
        if(item)
        {
            //如果item有则是修改，否则是添加
            //console.log('这里是修改，编辑',item);
            //应该对item进行一个clone，否则修改会联动
            this.myForm=dataClone(item);
            //对后台秒乘以1000转为毫秒展示[这样新增时候该数据能显示]
            //如果后台传时间了再对时间进行处理，否则不动
            if(this.myForm['time']){
              this.myForm['time']=(this.myForm['time']*1000);
            }
            //更改通知栏title
            this.formState="1";
        }
        else{
            //添加
            this.myForm={};
            //更改通知栏title
            this.formState="0";
        }        
        this.dialogVisible=true;
      },
      //控制对话框关闭
      closeDialog(){
        this.dialogVisible=false;
        //清空存储的数据
        this.myForm={};
      },
      //对手动上传进行设置
      uploadManual(prop)
      {
        return ({file})=>{
            console.log(file,prop);
            //赋值
            this.myForm[prop]=file;
        }       
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='css' scoped>

</style>